<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/jpetstore.css" type="text/css"/>
</head>
<body>
<header th:fragment="header">
    <div id="Logo">
        <div id="LogoContent">
            <a th:href="@{'/catalog/main'}"><img src="/../images/logo-topbar.gif"/></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a href="viewCart"><img align="middle" name="img_cart" src="/../images/cart.gif"/></a>
            <img align="middle" src="/../images/separator.gif"/>
            <!--如果account在Session里，就把下面的account改为session.account，要是在model里就不变-->
            <a th:if="${account == null}" th:href="@{'/account/signOn'}">Sign In</a>
            <div th:if="${account != null}">
                <a th:href="@{'/account/signOut'}">Sign Out</a>
                <img align="middle" src="/../images/separator.gif"/>
                <a th:href="@{'/account/viewEditAccountForm'}">My Account</a>
                <img align="middle" src="/../images/separator.gif"/>
            </div>
            <a href="viewHelp">?</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <!--搜索栏目-->
            <form action="searchProducts" method="post">
                <input type="text" id="keyword" name="keyword" size="14"/>
                <!--添加以下代码-->
                <div class="auto hidden" id="auto">
                    <div class="auto_inp">1</div>
                    <div class="auto_out">2</div>
                </div>
                <input type="submit" name="searchProducts" value="Search"/>
                <script src="${pageContext.request.contextPath}/js/searchProduct.js"></script>
                <!--------------------->
            </form>
        </div>
    </div>
    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH">
            <img src="/../images/sm_fish.gif"/>
        </a>
        <img src="/../images/separator.gif"/>
        <a href="viewCategory?categoryId=DOGS">
            <img src="/../images/sm_dogs.gif"/>
        </a>
        <img src="/../images/separator.gif"/>
        <a href="viewCategory?categoryId=REPTILES">
            <img src="/../images/sm_reptiles.gif"/>
        </a>
        <img src="/../images/separator.gif"/>
        <a href="viewCategory?categoryId=CATS">
            <img src="/../images/sm_cats.gif"/>
        </a>
        <img src="/../images/separator.gif"/>
        <a href="viewCategory?categoryId=BIRDS">
            <img src="/../images/sm_birds.gif"/>
        </a>
    </div>
</header>

</body>
</html>